<template>
  <div>
    入学日期<el-input v-model="searchStu.datea" type="date" style="width: 120px"></el-input> 至
    <el-input v-model="searchStu.dateb" type="date" style="width: 120px"></el-input>
    <el-button @click="select">查询</el-button>
    <el-button @click="add">添加</el-button>
    <el-button @click="del">批量删除</el-button>
    <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="100">
      </el-table-column>
      <el-table-column
        prop="name"
        label="学生姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cla"
        label="所在班级"
        width="180">
      </el-table-column>
      <el-table-column
        prop="created"
        label="入学日期"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        width="300">
        <el-template slot-scope="stu">
          <el-button @click="update(stu.row.id)">修改</el-button>
        </el-template>
      </el-table-column>
      </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="this.searchStu.page"
      :page-size="this.searchStu.pageSize"
      layout="total, prev, pager, next"
      :total="this.searchStu.total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StudentView',
  data () {
    return {
      tableData: [],
      cleck: [],
      searchStu: {
        page: 1,
        pageSize: 3,
        key: '',
        total: 0,
        datea: '',
        dateb: ''
      }
    }
  },
  methods: {
    // 更新
    update (id) {
      alert(id)
      this.$router.push({
        name: 'up',
        query: id
      })
    },
    // 删除
    del () {
      const ids = this.cleck.map(x => {
        return x.id
      }).join(',')
      alert('选中' + ids)
      this.axios.get('/stu/del', { params: { ids: ids } })
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success('ok')
            location.reload()
          } else {
            this.$message.success('no')
          }
        })
    },
    // 跳转 添加页面
    add () {
      this.$router.push('/add')
    },
    // 模糊查询
    select () {
      this.axios.post('/student/list', this.searchStu)
        .then(res => {
          this.tableData = res.data.records
          this.searchStu.page = res.data.current
          this.searchStu.pageSize = res.data.size
          this.searchStu.total = res.data.total
        })
    },
    // 每页条数
    handleSizeChange (val) {
      this.searchStu.pageSize = val
      this.list()
    },
    // 页码
    handleCurrentChange (val) {
      this.searchStu.page = val
      this.list()
    },
    // 列表
    list () {
      this.axios.post('/student/list', this.searchStu)
        .then(res => {
          this.tableData = res.data.records
          this.searchStu.page = res.data.current
          this.searchStu.pageSize = res.data.size
          this.searchStu.total = res.data.total
        })
    },
    // 选中的行
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.cleck = val
    }
  },
  // 页面加载执行
  created () {
    this.list()
  }
}
</script>

<style scoped>

</style>
